<template>
  <Dialog :appDialog="appDialog">
    <el-form ref="formRef" :model="groupData" label-width="95px" class="demo_dynamic">
      <el-form-item
        prop="name"
        label="分组名称："
        size="small"
        :rules="[
          {
            required: true,
            message: '分组名称不能为空',
            trigger: 'blur'
          }
        ]"
      >
        <el-input class="group_data_name" :disabled="isDefault" v-model="groupData.name" maxlength="15"></el-input>
      </el-form-item>
      <el-form-item
        prop="tags"
        label="标签："
        :rules="[
          {
            required: true,
            message: '标签不能为空',
            trigger: 'blur'
          }
        ]"
      >
        <div class="zw-el-tags">
          <el-tag v-for="k in groupData.tags" :key="k" closable @close="handleClose(k)">
            {{ k }}
          </el-tag>
          <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="create_label_input" size="small" maxlength="15" placeholder="请输入标签内容" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm"> </el-input>
        <el-button v-else plan class="button-new-tag ml-1" size="small" @click="createLabel">新建标签</el-button>
        </div>
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, nextTick, watch } from 'vue'
  import Dialog from './Dialog.vue'
  import { ElInput, ElForm, ElMessage } from 'element-plus'
  import { addTags, EditTags } from '@/api/common'
  const InputRef = ref<InstanceType<typeof ElInput>>()
  const formRef = ref<InstanceType<typeof ElForm>>()

  const emit = defineEmits(['submit'])

  const inputValue = ref('')
  const inputVisible = ref(false)
  const labelList = ref([])
  const isEdit = ref(false)
  const isDefault = ref(false)
  interface Tag {
    id?: number
    name: string
  }
  interface TagGroup extends Tag {
    tags: Tag[]
  }
  const cancelHandel = () => {
    appDialog.visible = false
    formRef.value.resetFields()
    isEdit.value = false
    groupData.name = ''
    groupData.tags = []
  }
  // 保存标签
  const submitHandel = () => {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        try {
          isEdit.value ? await EditTags(groupData) : await addTags(groupData)
          ElMessage.success(`${isEdit.value ? '编辑' : '新建'}标签成功`)
          emit('submit')
          cancelHandel()
        } catch (e) {}
      }
    })
  }

  const appDialog = reactive({
    visible: false,
    title: `新建标签组`,
    width: '450px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
  })
  // 新建分组
  const groupData = reactive({
    name: '',
    tags: []
  })
  defineExpose({
    appDialog,
    groupData,
    isEdit,
    isDefault
  })
  const handleClose = (tag: string) => {
    const data = groupData.tags.filter((item: string) => item !== tag)
    groupData.tags = data
  }
  const createLabel = () => {
    inputVisible.value = true
    nextTick(() => {
      InputRef.value!.input!.focus()
    })
  }
  const handleInputConfirm = () => {
    if (groupData.tags.length > 3000) {
      ElMessage.warning('标签最多创建3000个')
      return
    }
    if (inputValue.value) {
      if (groupData.tags.includes(inputValue.value)) {
        ElMessage.warning('新建标签名不能重复')
        return
      }
      groupData.tags.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
  }
</script>
<style lang="scss" scoped>
  .demo_dynamic {
    margin-top: 14px;
    .el-form-item {
      margin-bottom: 24px;
    }
    .group_data_name {
      width: 300px;
    }
    .create_label_input {
      width: 140px;
    }
    .mr15 {
      margin-right: 15px;
    }
  }
</style>
